<template>

  <div v-if="tenderList.length>0">
    <div class="table-list">
    <div class="p-title">
      <span>公司招标信息</span>
    </div>
    <el-table :data="tenderList" border headStyle>
      <el-table-column label="招标发布日期" align="center" prop="publishDatetime">
        <template #default="scope">
          {{ dayjs(scope.row.publishDatetime).format('YYYY-MM-DD') }}
        </template>
      </el-table-column>
      <el-table-column label="公告类型" align="center" prop="type">
        <template #default="scope">
          <el-tag v-if="scope.row.type === '1'"> 招标预告 </el-tag>
          <el-tag v-if="scope.row.type === '2'"> 招标公告 </el-tag>
          <el-tag v-if="scope.row.type === '3'"> 招标变更 </el-tag>
          <el-tag v-if="scope.row.type === '4'"> 中标结果 </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="标题" prop="title" align="center" show-overflow-tooltip>
        <template #default="scope">
          <div class="title" v-if="scope.row.type == 1 || scope.row.type == 2">
            <span> {{ scope.row.title }}</span><el-button type="primary" size="small">招标中</el-button>
          </div>
          <div class="title" v-else>
            <span> {{ scope.row.title }}</span>
          </div>
        </template>

      </el-table-column>
      <el-table-column label="中标金额（万）" align="center" prop="bidAmount">
        <template #default="scope">
          {{ scope.row.bidAmount == null || scope.row.bidAmount === '' ? '—' : (scope.row.bidAmount / 10000).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="text" key="text" v-if="scope.row.link != null && scope.row.link != '' " @click="handleLinkClick(scope.row.link)">查看正文信息</el-button>
          <span v-else>—</span>
        </template>

      </el-table-column>
    </el-table>
    <div class="pagination">
      <!-- <el-pagination small background layout="prev, pager, next" :total="50" class="mt-4" /> -->
      <el-pagination
        v-model:current-page="currentPage1"
        v-model:page-size="pageSize1"
        :page-sizes="[5, 10, 20, 50, 100]"
        :size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount1"
        @size-change="handleSizeChange1"
        @current-change="handleCurrentChange1"
      />
    </div>
  </div>
  <div class="years">
    <div class="left">
      <div class="p-title">
        <span>中标供应商（近2年）</span>
      </div>
      <div style="height: 220px; overflow-y: auto;">
        <div class="datas" v-for="(item,index) in dataList" :key="index">
          <div class="item">
            <h2>
              {{ item.infoTitle }}
            </h2>
            <p>发布日期：{{ (item.infoPublishDateTime).split(' ')[0] }}</p>
          </div>
        <!-- <div class="item">
          <img src="@/assets/images/icon_zhong.png">
          <h2>
            楼宇自动化设备安装与维护设备采购楼宇自动化设备安装与维护设备采购
          </h2>
          <p>发布日期：2025-08-10</p>
        </div> -->
          <div class="item active" v-for="(item,index2) in dataList[index].bidWinner" :key="index2">
            <img src="@/assets/images/icon_zhong.png">

            <h2>
              {{item.bidWinner}}
            </h2>
            <p>中标金额：{{ (item.bidAmount / 10000).toFixed(2) }}万</p>
          </div>
        </div>
      </div>
      <!-- <div class="datas">
        <div class="item">
          <img src="@/assets/images/icon_zhong.png">
          <h2>
            楼宇自动化设备安装与维护设备采购楼宇自动化设备安装与维护设备采购
          </h2>
          <p>发布日期：2025-08-10</p>
        </div>
        <div class="item active">
          <img src="@/assets/images/icon_zhong.png">

          <h2>
            楼宇自动化设备安装与维护设备采购楼宇自动化设备安装与维护设备采购
          </h2>
          <p>发布日期：2025-08-10</p>
        </div>
        <div class="item">
          <img src="@/assets/images/icon_zhong.png">
          <h2>
            楼宇自动化设备安装与维护设备采购楼宇自动化设备安装与维护设备采购
          </h2>
          <p>发布日期：2025-08-10</p>
        </div>
      </div> -->
    </div>
    <div class="right">
      <div class="p-title">
        <span>供应商中标数排名（近2年）</span>
      </div>
      <div class="item" v-for="(item,index) in tenderAnalysisData2.isWinUserRanking" :key="index">
        <span>中标{{item.isWinCount}}次</span>
        <div> {{item.bidWinner}}</div>
      </div>
    </div>
  </div>
  <div class="data_analysis">
    <div class="p-title">
      <span>招标-数据分析</span>
    </div>
    <div class="tabs">
      <div class="item" :class="tenderDateType == 1 ? 'active':''" @click="tenderTime(1)">
        近半年
      </div>
      <div class="item" :class="tenderDateType == 2 ? 'active':''" @click="tenderTime(2)">
        近一年
      </div>
      <div class="item" :class="tenderDateType == 3 ? 'active':''" @click="tenderTime(3)">
        近两年
      </div>
    </div>
    <div class="datas">
      <div class="count">
        <div class="item">累计招标次数
          <div class="num"><span>{{ poaData[0].tenderCount }}</span> 次</div>
        </div>
        <div class="item">累计中标公司
          <div class="num"><span>{{ poaData[0].isWinCount }}</span> 家</div>
        </div>
        <div class="item">累计招标金额
          <div class="num"><span>{{ (poaData[0].isWinAmout/10000).toFixed(2) }}</span> 万</div>
        </div>
      </div>
      <div class="chart-one">
        <poa-charts :poaData = "poaData"></poa-charts>
      </div>
      <div class="chart-two">
        <tcCharts :tcData = "tcData"></tcCharts>
      </div>
    </div>

  </div>
  </div>

  <div v-if="bidList.length>0">
    <div class="table-list" style="margin-top: 20px;">
    <div class="p-title">
      <span>公司投标信息</span>
    </div>
    <el-table :data="bidList" border :header-row-style="headStyle">
      <el-table-column label="招标发布日期" align="center" prop="publishDatetime">
        <template #default="scope">
          {{ dayjs(scope.row.publishDatetime).format('YYYY-MM-DD') }}
        </template>
      </el-table-column>
      <el-table-column label="公告" show-overflow-tooltip align="center" prop="title"></el-table-column>
      <el-table-column label="招标公司" show-overflow-tooltip align="center" prop="purchaser"> </el-table-column>
<!--      <el-table-column label="结束日期" align="center"></el-table-column>-->
      <el-table-column label="是否中标" align="center" prop="isWin">
        <template #default="scope">
          <span style="color: rgba(212, 48, 48, 1);" v-if="scope.row.isWin == '1'">已中标</span>
          <span v-if="scope.row.isWin == '0'">未中标</span>
        </template>
      </el-table-column>

      <el-table-column label="中标金额（万）" align="center" prop="bidAmount">
        <template #default="scope">
          <span v-if="scope.row.isWin == '1'">{{ scope.row.bidAmount == null || scope.row.bidAmount == '' ? "—" :(scope.row.bidAmount / 10000).toFixed(2) }}</span>
          <span v-else>—</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="text" key="text" v-if="scope.row.link != null && scope.row.link != ''" @click="handleLinkClick(scope.row.link)">查看正文信息</el-button>
          <span v-else>—</span>
        </template>

      </el-table-column>
    </el-table>
    <div class="pagination">
      <!-- <el-pagination small background layout="prev, pager, next" :total="50" class="mt-4" /> -->
      <el-pagination
        v-model:current-page="currentPage2"
        v-model:page-size="pageSize2"
        :page-sizes="[5, 10, 20, 50, 100]"
        :size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount2"
        @size-change="handleSizeChange2"
        @current-change="handleCurrentChange2"
      />
    </div>
  </div>
  <div class="data_analysis">
    <div class="p-title">
      <span>投标-数据分析</span>
    </div>
    <div class="tabs">
      <div class="item" :class="bidDateType == 1 ? 'active':''" @click="bidTime(1)">
        近半年
      </div>
      <div class="item" :class="bidDateType == 2 ? 'active':''" @click="bidTime(2)">
        近一年
      </div>
      <div class="item" :class="bidDateType == 3 ? 'active':''" @click="bidTime(3)">
        近两年
      </div>
    </div>
    <div class="datas">
      <div class="count">
        <div class="item">累计投标次数
          <div class="num"><span>{{ ptaData[0].bidCount }}</span> 次</div>
        </div>
        <div class="item">累计中标次数
          <div class="num"><span>{{ ptaData[0].isWinCount }}</span> 次</div>
        </div>
        <div class="item">累计中标金额
          <div class="num"><span>{{ (ptaData[0].isWinAmout/10000).toFixed(2) }}</span> 万</div>
        </div>
      </div>
      <div class="chart-one">
        <ptaCharts :ptaData = "ptaData"></ptaCharts>
      </div>
      <div class="chart-two">
        <brokenLine :brokenLineData = "brokenLineData"></brokenLine>

      </div>
    </div>

  </div>
  </div>

  <div class="kong" v-if="bidList.length == 0&&tenderList.length == 0">
    <img src="@/assets/images/kong.png" alt="">
    暂无招投标信息
  </div>
</template>
<script setup>
import { onMounted, ref, watch } from "vue";
import { useRoute } from 'vue-router';
import tcCharts from "./chart/tc.vue"
import poaCharts from "./chart/poa.vue"
import ptaCharts from "./chart/pta.vue"
import brokenLine from "./chart/brokenLine.vue"
import baseService from "@/service/baseService";
import dayjs from "dayjs";

// 路由相关
const route = useRoute();
const companyId = ref(); // 默认值
const companyName = ref('');
const bidDateType = ref(1);
const tenderDateType = ref(1);

// 分页
const totalCount1 = ref(0)
const currentPage1 = ref(1)
const pageSize1 = ref(5)
const handleSizeChange1 = (val) => {
  console.log(`${val} items per page`)
  pageSize1.value = val;
  getTenderList();
}
const handleCurrentChange1 = (val) => {
  console.log(`current page: ${val}`)
  currentPage1.value = val;
  getTenderList();
}
// 分页
const totalCount2 = ref(0)
const currentPage2 = ref(1)
const pageSize2 = ref(5)
const handleSizeChange2 = (val) => {
  console.log(`${val} items per page`)
  pageSize2.value = val;
  getBidList();
}
const handleCurrentChange2 = (val) => {
  console.log(`current page: ${val}`)
  currentPage2.value = val;
  getBidList();
}

const handleLinkClick = (url) => {
  if (url) {
    window.open(url, '_blank');
  }
};
//招标列表
const tenderList = ref([]);
//投标列表
const bidList = ref([]);
// 近两年数据
const tenderAnalysisData2 = ref([]);
const dataList = ref([]);
const dataListDetail = ref([]);
// 招标数据分析
const tenderAnalysisData = ref([]);
// 投标数据分析
const bidAnalysisData = ref([]);
const headStyle = { height: '60px', background: 'rgba(239, 244, 255, 1)' };

const ptaData = ref([{
  isWinCount: 0,
  bidCount: 0,
  isWinAmout: 0
}]);
const brokenLineData = ref([{
  mouth: 0,
  bidCount: 0,
  isWinCount: 0
}]);

const tcData = ref([{
  mouth: 0,
  bidCount: 0,
}]);
const poaData = ref([{
  tenderAmout1: 0,
  tenderAmout2: 0,
  tenderAmout3: 0,
  tenderAmout4: 0,
  tenderCount: 0,
  isWinCount: 0,
  isWinAmout:0
}]);

const tenderTime = (type) => {
  tenderDateType.value = type;
  getTenderAnalysis();
};
const bidTime = (type) => {
  bidDateType.value = type;
  getBidAnalysis();
};
const getBidAnalysis = () => {
  let bidAnalysisData = {
    dateType: bidDateType.value,
    companyId: companyId.value
  };
  baseService.get('/noc/companybidinfo/dataanalysis', bidAnalysisData).then((res) => {
    if (res.code === 0) {
      bidAnalysisData.value = res.dataAnalysis;
      // console.log("1--------------------",bidAnalysisData.value);
      ptaData.value = [{
        isWinCount: bidAnalysisData.value.isWinCount,
        bidCount: bidAnalysisData.value.bidCount,
        isWinAmout: bidAnalysisData.value.isWinAmout
      }];
      console.log("----------22222----------",ptaData.value)
      bidAnalysisData.value.companyBidInfoDTOS.forEach((item, index) => {
        brokenLineData.value[index] = {
          mouth: item.mouth,
          bidCount: item.bidCount,
          isWinCount: item.isWinCount
        }
      })
      // console.log("----------11111----------",ptaData.value)
    }
  })
};

const getTenderAnalysis = () => {

  let tenderAnalysisData = {
    dateType: tenderDateType.value,
    companyId: companyId.value
  };

  baseService.get('/noc/companytenderinfo/dataanalysis', tenderAnalysisData).then((res) => {
    if (res.code === 0) {
      tenderAnalysisData.value = res.dataAnalysis;
      // console.log("2--------------------",tenderAnalysisData.value);
      poaData.value[0].tenderAmout1 = tenderAnalysisData.value.tenderAmout1;
      poaData.value[0].tenderAmout2 = tenderAnalysisData.value.tenderAmout2;
      poaData.value[0].tenderAmout3 = tenderAnalysisData.value.tenderAmout3;
      poaData.value[0].tenderAmout4 = tenderAnalysisData.value.tenderAmout4;
      poaData.value[0].tenderCount = tenderAnalysisData.value.tenderCount;
      poaData.value[0].isWinCount = tenderAnalysisData.value.isWinCount;
      poaData.value[0].isWinAmout = tenderAnalysisData.value.isWinAmout;
      tenderAnalysisData.value.companyBidInfoDTOS.forEach((item, index) => {
        tcData.value[index] = {
          mouth: item.mouth,
          bidCount: item.bidCount,
        }
      })
    }
  })
  baseService.get(`/noc/companytenderbid/iswinanalysis/${companyId.value}`).then((res) => {
    if (res.code === 0&&res.isWinAnalysis.isWinUser.length>0) {;
      tenderAnalysisData2.value = res.isWinAnalysis;
      dataList.value = tenderAnalysisData2.value.isWinUser;

      console.log("dataList.value",dataList.value);
      console.log("近两年数据",tenderAnalysisData2.value);
    }
  })
}

// 招标
const getTenderList = () => {
  let tenderData = {
    page: currentPage1.value,
    limit: pageSize1.value,
    companyId: companyId.value
  };
  baseService.get('/noc/companytenderinfo/list', tenderData).then((res) => {
    if (res.code === 0) {
      tenderList.value = res.page.list;
      totalCount1.value = res.page.totalCount;
      console.log("招标列表",tenderList.value);
    }
  })
}
// 投标
const getBidList = () => {
  let bidData = {
    page: currentPage2.value,
    limit: pageSize2.value,
    companyId: companyId.value
  };
  baseService.get('/noc/companybidinfo/list', bidData).then((res) => {
    if (res.code === 0) {
      bidList.value = res.page.list;
      totalCount2.value = res.page.totalCount;
      console.log("投标列表",bidList.value);
    }
  })
}

// 监听路由参数变化（移到函数定义之后）
watch(() => route.query, (newQuery) => {
  if (newQuery.id) {
    companyId.value = parseInt(newQuery.id);
  }
  if (newQuery.name) {
    companyName.value = newQuery.name;
  }
  // 路由参数变化时重新获取数据
  getBidAnalysis();
  getTenderAnalysis();
  getBidList();
  getTenderList();
}, { immediate: true });

onMounted(() => {
  getBidAnalysis();
  getTenderAnalysis();
  getBidList();
  getTenderList();
})
</script>
<style lang="scss" scoped>
@import url("./style.scss");
</style>
